<template>
	<view>
	<view class="add-c">
		<view class="row">
			<view class="name">
				收件人
			</view>
			<view class="ipts">
				<input type="text" value=""  placeholder="请输入收件人姓名" v-model="name"/>
			</view>
		</view>
		<view class="row">
			<view class="name">
				电话号码
			</view>
			<view class="ipts">
				<input type="text" value=""  placeholder="请输入收件人电话号码" v-model="phoneNumber"/>
			</view>
		</view>
		<view class="row">
			<view class="name">
				所在地区
			</view>
			<view class="ipts">
				<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion" >
				          <view v-if="flag">请点击选择地址</view>
						  <view v-else>{{cityInfo}}</view>
				       </pick-regions>
			</view>
		</view>
		<view class="row">
			<view class="name">
				详细地址
			</view>
			<view class="ipts">
				<input type="text" value=""  placeholder="请输入详细地址" v-model="detailAddress"/>
			</view>
		</view>
		<view class="row">
			<view class="name">
				设置默认地址
			</view>
			<view class="ipts">
				<view class="radios">
					<evan-switch v-model="checked" active-color=" #354e44"></evan-switch>
				</view>
			</view>
		</view>
		<!-- 保存地址 -->
		<view class="add" @tap="save">
			保存地址
			 
		</view>
	</view>
	
	</view>
</template>

<script>
	  import pickRegions from '@/components/pick-regions/pick-regions.vue'
	  import {addressInfo} from "../../../utils/address/index.js"
	export default {
		 components:{ pickRegions },
		data() {
			return {
				 region:"",
				 defaultRegion:['广东省','广州市','番禺区'],
				 defaultRegionCode:'440113',
				 checked:false,
				 cityInfo:"",
				 province:'',
				 city:'',
				 cityCode:'',
				 detailAddress:'',
				 name:"",
				 phoneNumber:'',
				 flag:true
				 
			};
		},
		methods:{
			handleGetRegion(res){
				// console.log(res)
				this.cityInfo = res.map(item=>item.name).join('-')
				
				this.province=res[0].name
				this.city=res[1].name
				this.region=res[2].name
				this.cityCode=res.map(item=>item.code).join("-")
				console.log(this.province,this.city,this.region,this.cityCode)
				if(this.checked){
					this.defaultStatus=1
				}else{
					this.defaultStatus=0
				}
				this.flag=false
			},
			save(){
				addressInfo(
				{
				  "city": this.city,
				  "cityCode": this.cityCode,
				  "defaultStatus": this.defaultStatus,
				  "detailAddress": this.detailAddress,
				  "name": this.name,
				  "phoneNumber": this.phoneNumber,
				  "province":this.province,
				  "region": this.region
				}).then(res=>{
					uni.showToast({
						title:"正在提交"
					})
					if(res.success){
						uni.showToast({
							title:"保存成功"
						})
					}
				uni.navigateBack({
					
				})
				})
				
			}
			
		},
		
		
	}
</script>

<style lang="scss" scoped>
	.add-c{
		width: 90%;
		margin:  0 auto;
		.add{
			position: fixed;
			bottom: 80rpx;
			width: 70%;
			margin: 0 auto;
			height: 80rpx;
			background-color: #354e44;
			border-radius: 80rpx;
			left: 50%;
			margin-left: -35%;
			color: #fff;
			line-height: 80rpx;
			text-align: center;
		}
		.row{
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 2rPx solid #ccc;
				.name{
					width: 30%;
					height: 120rpx;
					font-weight: 200;
					font-size: 30rpx;
					line-height: 120rpx;
					text-align: left;
				}
				.ipts{
					width: 70%;
					// display: flex;
					// justify-content: center;
					// align-items: center;
					font-size: 30rpx;
					.radios{
						float: right;
					}
				}
			}
	}

</style>
